<template>
	<view class="main">
		<view class="info_box">
			<image class="image" :src="details.personalImg"></image>
			<view class="info">
				<view v-if="details.name">{{ details.name }}({{ details.position }})</view>
				<view>
					所属医院：{{ details.organName }}
				</view>
				<view class="attention">
					<view class="gz" v-if="gz == 1" @click="attention(2)">关注</view>
					<view class="gz ygz" v-if="gz == 2" @click="attention(1)">已关注</view>
					<view class="gz ygz" @click="goChat(item)">咨询</view>
				</view>
			</view>
		</view>
		<view class="detail">
			<view class="d_box">
				<view class="title"><span class="line"></span>简介</view>
				<view class="d_info">
					{{ details.briefIntroduction }}
				</view>
			</view>
			<view class="d_box">
				<view class="title"><span class="line"></span>擅长</view>
				<view class="d_info">
					{{ details.beGoodAt }}
				</view>
			</view>
		</view>
		<view class="related_expert">
			<view class="title">相关专家</view>
			<view class="list_info">
				<view class="list" v-for="item in list" :key="item.uid">
					<view class="img">
						<image class="image" :src="item.personalImg"></image>
					</view>
					<view class="l_box">
						<view class="name">{{ item.name }}</view>
						<view class="organ">{{ item.organName }}</view>
						<view class="zx ygz" @click="goChat(item)">咨询</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import * as search from '../../common/api/search.js'
import * as me from '../../common/api/me.js'
export default {
	data() {
		return {
			uid:'',
			details:{
				name:'',
				position:'',
				organName:'',
				briefIntroduction:'',
				beGoodAt:'',
			},
			pageIndex:1,
			pageSize:6,
			list:[],
			gz:1,
		}
	},
	onLoad(params){
		this.uid = params.uid;
		this.getInfo();
		this.relatedExpert();
	},
	methods: {
		// 详情
		getInfo(){
			let params = {
				uid:this.uid,
				openId:uni.getStorageSync('openid_key')
			};
			search.queryById(params).then(res => {
				this.details = res.data.data;
				this.gz = res.data.data.followId == null ? 1 : 2;
			})
		},
		// 关注
		attention(type){
			let param = {}
			if(type == 1){
				param = {
					uid:this.details.followId
				};
			}else{
				param = {
					openId:uni.getStorageSync('openid_key'),
					expertId:this.uid
				};
			}
			
			me.insert(param).then(res => {
				console.log("res",res.data.code)
				if(res.data.code == 200){
					this.gz = type
					this.getInfo();
				}
			})
		},
		// 相关专家
		relatedExpert(){
			let params = {
				pageIndex: this.pageIndex,
				pageSize: this.pageSize,
			};
			search.expertInfo(params).then(res => {
				this.list = res.data.data.rows;
			})
		},
		// 咨询
		goChat(e){
			const info = JSON.stringify(e)
			uni.navigateTo({
				url: "/pages/chat/chat?info=" + info
			})
		},
	}
}
</script>

<style lang="scss" scoped>
.main{
	padding:30rpx;
	.info_box{
		display: flex;
		margin-bottom:20rpx;
		.image{
			width: 150rpx;
			height: 150rpx;
			margin-right: 15rpx;
		}
		.info{
			display: flex;
			flex-direction: column;
			flex:1;
			font-size: 28rpx;
			view{
				height:50rpx;
				line-height:50rpx;
				overflow:hidden;
				text-overflow:ellipsis;
			}
			.attention{
				display:flex;
				height:60rpx;
				view{
					border-radius: 10rpx;
					margin:0rpx 15rpx 0rpx 0rpx;
					width:150rpx;
					text-align: center;
					display:block;
					color: #fff;
				}
				.gz{
					background: #faa51b;
				}
				.ygz{
					background: #27a280;
				}
			}
		}
	}
	.detail{
		.d_box{
			margin:10rpx 0;
			.line{
				display: inline-block;
				width:10rpx;
				height: 40rpx;
				background: #27a280;
				margin-right: 10rpx;
			}
			.d_info{
				padding:10rpx;
				font-size: 28rpx;
			}
		}
	}
	.related_expert{
		margin-top:20rpx;
		.list_info{
			display:flex;
			flex-wrap: wrap;
			.list{
				width:50%;
				display: flex;
				align-items: center;
				margin-bottom:20rpx;
				.img{
					.image{
						margin:8rpx;
						width:110rpx;
						height:130rpx;
						overflow: hidden;
					}
				}
				.l_box{
					font-size: 24rpx;
					.name{
						height: 30rpx;
						line-height: 30rpx;
					}
					.organ{
						height: 60rpx;
						line-height: 30rpx;
					}
					.zx{
						padding:5rpx 10rpx;
						background: #27a280;
						color: #fff;
						border-radius: 10rpx;
						width:150rpx;
						text-align: center;
					}
				}
			}
		}
	}
	.title{
		display: flex;
		font-size: 32rpx;
		font-weight: 600;
		margin:10rpx 0;
	}
}
</style>